import Icon from '@/components/Icon.vue'
import VideoController from '@/components/VideoController.vue'
import { cameraUrl } from '@/shared'
import { useConfigCameraStore } from '@/stores/configCamera'
import { useVideoStore } from '@/stores/video'
import type { CameraPlayerInstance } from '@/types/components'
import type { CameraData } from '@/views/Config/types'
import { ElButton, ElTable, ElTableColumn } from 'element-plus'
import { debounce } from 'lodash'
import { defineComponent, ref } from 'vue'
import { useI18n } from 'vue-i18n'
export const cameraRef = ref<CameraPlayerInstance>()
export default defineComponent({
  emits: ['confirm'],
  setup() {
    const video = useVideoStore()

    const { t } = useI18n()

    /**
     * 重新推拉流
     */
    const onRefresh = async () => {
      await video.getWebRTCUrl()
      cameraRef.value?.initPlay()
    }

    const configCameraStore = useConfigCameraStore()
    /**
     * 播放器实例
     */
    const currentRow = ref()
    const changeCamera = debounce(
      (val: {
        id?: number
        rtsp: string
        name: string
        password: string
        port: number
        user: string
        brand: string
        ip: string
      }) => {
        cameraUrl.value = ''
        if (val) {
          currentRow.value = val
          video.changeVideo(val?.rtsp)
        }
      }
    )

    return () => (
      <div class=" w-full p-1  h-full">
        <div class="flex justify-between h-full">
          <div class="flex flex-col justify-between">
            <ElTable
              data={configCameraStore.tableData}
              size="small"
              show-header={false}
              highlight-current-row
              onCurrent-change={changeCamera}
              style={{
                '--el-table-current-row-bg-color': '#ff9933',
                '--el-fill-color-light': '#ff9933'
              }}
            >
              {configCameraStore.columns.map((item) => (
                <ElTableColumn key={item.prop} prop={item.prop} label={item.label}>
                  {{
                    default: ({ row }: { row: CameraData }) => item.slot && item.slot(row)
                  }}
                </ElTableColumn>
              ))}
            </ElTable>
            <div class="flex flex-col">
              <ElButton size="small" onClick={configCameraStore.handleVisible}>
                {t('tian-jia')}
              </ElButton>
              <ElButton size="small" onClick={onRefresh}>
                <Icon icon="vaadin:time-backward"></Icon>
              </ElButton>
            </div>
          </div>
          <VideoController />
        </div>
      </div>
    )
  }
})
